<template>
	<view style="padding-top: 170rpx;">
		<u-navbar title="详情" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="msg" @click="clear()">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view
					style="display: flex;align-items: center;justify-content:flex-start;margin-top: 22rpx;margin-left: 22rpx;">
					<u-avatar :src="loveObj.userPic" shape="circle" size="35" :lazy-load="true"></u-avatar>
					<view style="margin-left: 5px;">
						<view style="font-weight: 500;">{{loveObj.userName}}</view>
						<view class="timestamp">{{loveObj.createTime}}</view>
					</view>
				</view>
				<view style="display: flex;">
					<view style="width: 100rpx;margin-right: 18rpx;" v-if="isguan!==1">
						<u-tag text="关注" shape="circle" @click="guan(1)"></u-tag>
					</view>
					<view style="width: 128rpx;margin-right: 18rpx;" v-if="isguan===1">
						<u-tag text="已关注" shape="circle" plain plainFill @click="guan(0)"></u-tag>
					</view>
				</view>
			</view>
			<view class="zhu">
				{{loveObj.content}}
				<!--  <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
		                            @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video> -->

				<view style="margin-top: 15rpx;" >
					<u--text prefixIcon="file-text-fill" iconStyle="font-size: 20px" :text="'出售价格:'+loveObj.price"
						lineHeight="20"></u--text>
					<u--text prefixIcon="clock-fill" iconStyle="font-size: 17px" :text="'原始价格:'+ loveObj.souPrice"
						lineHeight="25"></u--text>
						<u--text prefixIcon="clock-fill" iconStyle="font-size: 17px" :text="'成色:'+ loveObj.news+'新'"
							lineHeight="25"></u--text>
					<u--text prefixIcon="phone-fill" iconStyle="font-size: 20px" :text="'联系电话:'+ loveObj.tel"
						lineHeight="20"> </u--text>
				</view>

				<view class="albums" v-if="loveObj.picUrls!==null"
					:style="piclength!==1&&piclength!==2&&piclength%3>=0?'justify-content:center':'justify-content:flex-start'">
					<u-album :urls="loveObj.picUrls" multipleSize="100" maxCount="9" keyName="picUrl"
						v-if="piclength!==0"></u-album>
				</view>
				<view style="margin-top: 38rpx;padding-bottom: 50rpx;">
					<u-row justify="space-between">
						<u-col span="7">
							<view style="width: 155rpx;">
								<u-tag :text="loveObj.typeName" plain type="warning" shape="circle"></u-tag>
							</view>
						</u-col>
						<u-col span="5">
							<view class="dian">
								<u--text prefixIcon="eye" iconStyle="font-size: 20px"
									:text="loveObj.viewCount"></u--text>
								<u--text prefixIcon="thumb-up" iconStyle="font-size: 20px;color:red" @click="dian(1)"
									v-if="isdian===1" :text="zanId===null?0:zanId"></u--text>
								<u--text prefixIcon="thumb-up" iconStyle="font-size: 20px;"
									v-if="isdian===0||isdian===null" @click="dian(0)"
									:text="zanId===null?0:zanId"></u--text>
								<u--text prefixIcon="chat" iconStyle="font-size: 20px"
									:text="loveObj.pingId===null?0:loveObj.pingId"
									v-if="pianUser.status!==2&&pianUser.status!=='2'"></u--text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>

		<view class="common">
			<u--text :text="'共有'+loveObj.pingId+'条评论'" prefixIcon="chat" iconStyle="font-size: 18px"></u--text>
			<view v-for="(it,index) in commons">
				<view @click="huifu(it,null)"
					style="display: flex;align-items: center;justify-content:flex-start;margin-top: 22rpx;margin-left: 22rpx;">
					<u-avatar :src="it.userPic" shape="circle" size="34" :lazy-load="true"></u-avatar>
					<view style="font-weight: 500;margin-left: 5px;">{{it.userName}}</view>
				</view>
				<view style="margin-left: 65rpx;">
					<view style="font-size: 13px;">{{it.name}}</view>
					<view class="timestamp">{{it.createTime}}</view>

					<view v-for="itt in it.commonList">
						<view @click="huifu(it,itt)"
							style="display: flex;align-items: center;justify-content:flex-start;margin-top: 22rpx;margin-left: 18rpx;">
							<u-avatar :src="itt.userPic" shape="circle" size="30" :lazy-load="true"></u-avatar>
							<view style="font-weight: 500;margin-left: 5px;">{{itt.userName}} 回复 @{{itt.toUserName}}
							</view>
						</view>
						<view style="margin-left: 65rpx;">
							<view style="font-size: 13px;">{{itt.name}}</view>
							<view class="timestamp">{{itt.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<u-row customStyle="margin-bottom: 10px" gutter="10">
				<u-col span="2">
					<u-button type="default" icon="share-square" size="large" openType="share" iconColor="#000000"
						customStyle="padding: 0 0px;" class="custom-style">分享
					</u-button>
				</u-col>
				<u-col span="8">
					<u--input :placeholder="placeholder" border="surround" v-model="param.name"></u--input>
				</u-col>
				<u-col span="2">
					<u-button type="primary" text="确定" @click="submit()"></u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pianUser: uni.getStorageSync("user"),
				placeholder: '请输入内容',
				pingCount: 0,
				isguan: 0,
				isdian: 0,
				zanId: 0,
				piclength: 0,
				commons: [],
				user: {
					id: 1,
					userName: "lisa",
					userPic: "4343"
				},
				loveObj: [],
				params: {
					id: ''
				},
				param: {
					parentId: '',
					name: '',
					userId: 0,
					userName: '',
					userPic: '',
					loveId: 0,
					toUserId: 0,
					toUserName: ''
				},
			}
		},
		methods: {
			rightClick() {
				uni.navigateBack()
				console.log('rightClick');
			},
			leftClick() {
				uni.navigateBack()
				console.log('leftClick');
			},
			clear() {
				this.placeholder = '请输入内容'
				this.param.toUserId = this.loveObj.userId,
					this.param.toUserName = this.loveObj.toUserName,
					this.param.parentId = ''
			},
			huifu(item, it) {
				this.param.parentId = item.id
				console.log(it)
				if (it === null || it === '') {
					this.placeholder = '回复@' + item.userName
					this.param.toUserId = item.userId
					this.param.toUserName = item.toUserName
				} else {
					this.placeholder = '回复@' + it.userName
					this.param.toUserId = it.userId
					this.param.toUserName = it.userName
				}

			},
			async submit() {
				var isLogin = this.$isLogin()
				if (!isLogin) {
					return;
				}
				this.user = uni.getStorageSync("loginUser")
				this.param.userPic = this.user.userPic
				this.param.loveId = this.loveObj.id
				this.param.userId = this.user.id
				if (this.param.toUserId === 0) {
					this.param.toUserId = this.loveObj.userId
					this.param.toUserName = this.loveObj.userName
				}
				this.param.userName = this.user.userName

				const res = await this.$myRuquest({
					url: '/font/commontAdd',
					data: this.param,
					method: 'post'
				})
				this.getList()
				this.loveObj.pingId = 1 + this.loveObj.pingId
				this.param.name = ''
			},
			async getList() {
				var user = uni.getStorageSync("loginUser")
				// if (user === null || user === '') {
				// 	user.id = ''
				// }
				const res = await this.$myRuquest({
					url: '/font/' + this.params.id + '?loginId=' + this.user.id,
					data: this.params
				})
				this.loveObj = res.data.data
				this.pingCount = this.loveObj.pingId
				this.isguan = this.loveObj.isguan
				this.zanId = this.loveObj.zanId
				this.isdian = this.loveObj.isdian
				this.piclength = this.loveObj.picUrls.length

				const res2 = await this.$myRuquest({
					url: '/font/getCommon/' + this.params.id,
				})
				this.commons = res2.data.rows
			},
			async guan(type) {
				var guan = {
					userId: this.user.id,
					userName: this.user.userName,
					buserId: this.loveObj.userId,
					buserName: this.loveObj.userName
				}
				const res = await this.$myRuquest({
					url: '/font/guan',
					data: guan
				})
				if (type === 1) {
					this.isguan = 1
				} else {
					this.isguan = 0
				}
			},
			async dian(type) {
				const res = await this.$myRuquest({
					url: '/font/zan/' + this.loveObj.id,
					data: this.user
				})
				if (type === 1) {
					this.isdian = 0
					if (this.zanId >= 1) {
						this.zanId = this.zanId - 1
					}
				} else {
					this.isdian = 1
					this.zanId = this.zanId + 1
				}
			},
		},
		onLoad(option) {
			this.params.id = option.id
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.timestamp {
		margin-right: 9rpx;
		color: #999;
		font-size: 12px;
	}

	.bottom {
		border-top: 1rpx solid #282828;
		height: 100rpx;
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		bottom: 0rpx;
		// margin-bottom: 0;
	}

	.common {
		margin-left: 21rpx;
		margin-right: 21rpx;
		margin-top: 15rpx;
		padding-bottom: 100px;
	}

	.msg {
		margin-bottom: 25rpx;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		border-radius: 25rpx;
		margin-left: 21rpx;
		margin-right: 21rpx;
		margin-top: 15rpx;

		.zhu {
			margin-top: 19rpx;
			color: #282828;
			font-size: 16px;
			margin-left: 31rpx;
			margin-right: 31rpx;

			.albums {
				margin-top: 15rpx;
				display: flex;
				align-items: center;
			}

			.dian {
				color: #848484;
				margin-right: -20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

		}
	}
</style>